// 引入node中的path模块，处理文件路径 的小工具
const path = require('path')
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 导出一个webpack具有特殊属性配置的对象
module.exports = {
    mode: 'production', // 指定模式配置："development" | "production" | "none"
    // 入口
    entry: './src/main.js', // 入口模块文件路径 
    // 出口
    output: {
        // path: './dist/', 错误的，要指定绝对路径
        path: path.join(__dirname, './dist/'), //打包的结果文件生成的目录要是绝对路径
        filename: 'bundle.js' 
    },
    // 配置插件
    plugins: [ new HtmlWebpackPlugin({ 
        // 此插件作用是将 index.html 打包到 bundle.js 所在目录中, 
        // 同时也会在 index.html 中自动的 <script> 引入 bundle.js 
        // 注意：其中的文件名 bundle 取决于上面output.filename中指定的名称 
        template: './index.html' 
        }) 
    ],
    // 实时重新加载 
    devServer: { 
        contentBase: './dist' 
    },
    module: { // 模块 
        rules: [ // 规则 
            // css 打包
            { 
                test: /\.css$/, // 正则表达式，匹配 .css 文件资源 
                use: [ // 使用的 Loader ,注意顺序不能错 
                    'style-loader', 
                    'css-loader' 
                ] 
            } ,
            // images 打包
            {
                test: /\.(png|svg|jpg|gif)$/,
                use:[
                    'file-loader'
                ]
            },
            // 解决兼容性问题
            { 
                test: /\.m?js$/, 
                exclude: /(node_modules|bower_components)/, // 排除的目录 
                use: { 
                    loader: 'babel-loader', 
                    options: { 
                        presets: ['@babel/preset-env'] // 内置好的转译工具 
                    } 
                } 
            }
        ] 
    }
}